<template>
  <div class="search-result">
   <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="(item,index) in articles" :key="index" :title="item.title" />
    </van-list>
  </div>
</template>
<script>
import { getSearchResult } from '@/apis/search'
export default {
  name: 'SearchResult',
  props: {
    searchTxt: {
      type: String,
      require: true
    }
  },
  data () {
    return {
      articles: [],
      loading: false,
      finished: false,
      page: 1,
      per_page: 10
    }
  },
  created () {

  },
  methods: {
    async  onLoad () {
      const { data } = await getSearchResult({
        page: this.page,
        per_page: this.per_page,
        q: this.searchTxt
      })
      const { results } = data.data
      this.articles.push(...results)
      // 关闭本次loading
      this.loading = false
      // 判断是否还有数据
      if (results.length > 0) {
        this.page++
      } else {
        this.finished = true
      }
    }
  }
}
</script>
<style lang="less" scoped>

</style>
